<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-1.11.2.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
</head>
<body>
<article class="htmleaf-container">
    <header class="htmleaf-header">
        <h1>简单实用的垂直手风琴滑动菜单列表特效 <span>Simple Menu with toggle slide animation using jQuery and CSS</span></h1>
        <div class="htmleaf-links">
            <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
            <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Accordion/201509192591.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
        </div>
    </header>
    <div class="htmleaf-content">
        <ul class="mainmenu">
            <li><span>Account</span></li>
            <ul class="submenu">
                <div class="expand-triangle"></div>
                <li><span>Basics</span></li>
                <li><span>Picture</span></li>
                <li><span>Go Premium</span></li>
            </ul>
            <li>
                <span>Messages</span><div class="messages">23</div>
            </li>
            <ul class="submenu">
                <div class="expand-triangle"></div>
                <li><span>New</span></li>
                <li><span>Sent</span></li>
                <li><span>Trash</span></li>
            </ul>
            <li><span>Settings</span></li>
            <ul class="submenu">
                <div class="expand-triangle"></div>
                <li><span>Language</span></li>
                <li><span>Password</span></li>
                <li><span>Notifications</span></li>
                <li><span>Privacy</span></li>
                <li><span>Payments</span></li>
            </ul>
            <li><span>Logout</span></li>
        </ul>
    </div>
</article>
</body>
<style>
    body {
        margin: 0;
        padding: 0;
        font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
        background: url("../images/bg.jpg") top center no-repeat;
        letter-spacing: 0.2px;
    }

    ul {
        list-style: none;
        width: 276px;
    }

    li {
        cursor: pointer;
    }

    /*------------ Main Menu ------------*/
    .container {
        background-color: black;
    }

    /*------------ Main Menu ------------*/
    .mainmenu {
        margin: 90px auto;
        font-size: 16px;
        position: relative;
        padding: 0;
    }

    .mainmenu > li {
        background-color: #e4644b;
        border-top: 1px solid #d05942;
        height: 48px;
        color: #f7f1e3;
        box-sizing: border-box;
    }

    .mainmenu > li:first-child {
        border-radius: 7px 7px 0 0;
        border-top: 0;
    }

    .mainmenu > li:last-child {
        border-radius: 0 0 7px 7px;
    }

    .mainmenu > li span {
        display: block;
        line-height: 48px;
    }

    .mainmenu > li .icon {
        padding: 14px 20px 0 20px;
        float: left;
        width: 20px;
        height: 20px;
        display: block;
    }

    .mainmenu > li .messages {
        background: url("../images/messages.png") no-repeat;
        padding: 0;
        margin-top: -33px;
        margin-right: 19px;
        float: right;
        display: block;
        width: 34px;
        height: 18px;
        text-align: center;
        font-size: 11px;
        line-height: 19px;
    }

    .expand-triangle {
        background: url("../images/expand.gif") top left no-repeat;
        height: 10px;
        width: 276px;
        content: " ";
        margin-left: -40px;
    }

    /*------------ Sub Menu ------------*/
    .submenu {
        box-sizing: border-box;
        color: #ae9f9f;
        font-size: 13px;
        content: " ";
        /*opacity: 0.5;*/
    }

    .submenu li {
        line-height: 20px;
        height: 35px;
        padding-top: 11px;
        margin-left: -40px;
        background-color: #484141;
        border-left: solid 6px #484141;
        transition: border-left 220ms ease-in;
    }

    .submenu .chosen,
    .submenu .chosen:hover {
        border-left: solid 6px #96d145;
    }

    .submenu li:hover {
        border-left: solid 6px #d05942;
    }

    .submenu li span {
        margin-left: 30px;
    }

    .animate {
        animation: flip 2000ms ease-in-out alternate;
    }

    @keyframes flip {
        to {
            transform: rotateY(360deg);
        }
    }
</style>
</html>
